<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>

    <style>
        /*元素选择器*/
        h2{
            color:aqua;
        }

        /*类选择器*/
        .highlight{
            background-color: green;
        }

        /*ID选择器*/
        #header{
            font-size:small;
        }
        
        /*通用选择器*/
        *{   
            font-family: 'kaiti';
            font-weight: bolder;
        }

        /*子元素选择器*/
        .father > .son{
            color:yellowgreen;
        }

        /*后代选择器*/
        .father p{
            color:aquamarine;
            font-size: large;
        }

        /*相邻元素选择器标签*/
        h3 + p{
            background-color: red;
        }

        /*伪类选择器*/
        /*添加鼠标悬停示例*/
        #element:hover
        {
            background-color: blueviolet;
        }
    </style>
</head>        
<body>
    <h1>不同类型的CSS选择器</h1>

    <h2>这是一个元素选择器示例</h2>
    <h3 class="highlight">这是一个类选择器示例</h3>
    <h3>这是另一个类选择器示例</h3>
    <h4 id="header">这是一个ID选择器示例</h4>


    <div class="father">
        <p class="son">这是一个子元素选择器示例</p>
        <!--后代包含子代 子代不包含后代-->
        <div>
            <p class="grandson">这是一个后代选择器示例</p>
        </div>

    </div>

    <p>这是一个普通的p标签</p>
    <h3>这是一个相邻兄弟选择器示例</h3>
    <p>这是另一个p标签</p>

    <h3 id="element">这是一个伪类选择器示例</h3> 
</body>
</html>